//获取所有可拖拽的元素进行监听 - 有draggable=true的元素
const containers = document.querySelector(".containers");


//开始拖拽的原始节点
let source;

//拖拽开始的事件：
//每次拖拽时监听
containers.ondragstart = function (e) {
    //改变鼠标的cursor样式
    e.dataTransfer.effectAllowed = e.target.dataset.effect;
    //记录下拖拽的是哪个元素
    source = e.target;
    //e.target 可得到当前拖拽的元素
    console.log('dragStart',e.target)
}

//监听拖拽到哪个元素上
//只要元素被拖拽到，就一直监听打印
containers.ondragover = function (e) {
    //阻止浏览器的默认行为-为ondrop 浏览器默认某些元素是不让被拖拽到自己身上的
    e.preventDefault();

    //e.target 获得拖拽的元素被拖拽到哪个元素上
    //console.log('dragOver',e.target)
}

//监听拖拽到哪个元素上
//与over的区别是只触发一次，移动到哪个元素时触发一次
containers.ondragenter = function (e) {
    //每次拖拽清除之前的背景色
    clearDropStyle();

    let dropNode = getDropNode(e.target);
    //e.dataTransfer.effectAllowed 在start监听中设置后就一直存在
    if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
        //如果被拖拽到的元素的自定义元素 和 拖拽的元素的属性一致，改变被拖拽到元素背景色
        dropNode.classList.add("drop-over");
    }
    //e.target 获得拖拽的元素被拖拽到哪个元素上
    console.log('dragenter',e.target)
}


//监听元素拖拽到哪个元素上放手
//！！！！！！需注意的是：有些元素(eg:table/tr/td是不允许被拖拽到自己元素上的，是浏览器的默认行为，需要在dragOver事件阻止浏览器默认行为)
containers.ondrop = function (e) {
    //每次拖拽到清除之前的背景色
    clearDropStyle();
    const dropNode = getDropNode(e.target);
    //判断当前移入元素的自定义元素是否是可被接受的类型
    if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
        if (dropNode.dataset.drop === 'copy') {
            dropNode.innerHTML = '';
            const clonedSource = source.cloneNode(true);
            clonedSource.dataset.effect = 'move';
            dropNode.appendChild(clonedSource);
        } else {
            //move-从table移动到左侧列表
            source.remove();
        }
    }

    //e.preventDefault();
    console.log('drop',e.target)
}

//获取拖拽到的元素
//如果当前元素有data-drop的话，就返回，没有的话就找它的父元素
//解决的问题是：元素被二次拖拽进入左侧的元素列表，只有父元素改变样式
function getDropNode(node) {
    while (node) {
        if (node.dataset && node.dataset.drop) {
            return node;
        }
        node = node.parentNode;
    }
}

//清除被拖拽到的元素的背景色
function clearDropStyle() {
    document.querySelectorAll(".drop-over").forEach(node=>{
        node.classList.remove("drop-over");
    })
}